<template>
	<view class="warpper">
		<view class="container">
			<view class="category-wrap">
				<!-- 左侧类别列表 -->
				<view class="category-panel">
					<block v-for="(item, index) in categories" :key="index" v-if="index < 10">
						<view class="category" :class="{'active': categoryIndex == index}" @click='toList(item)'>
							<view class="name">{{item.name}}</view>
							<i class="icon i-right"></i>
						</view>
					</block>
				</view>
				<view class="cateBody">
					<view class="swiperImg">
						<u-swiper :list="banners" name='imageUrl' height='420' indicator-pos='bottomLeft' ></u-swiper>
					</view>
					<view class="other">
						<view class="otherBox" v-for="(other,i) in otherList" :key="i">
							<image :src="other.logo"></image><text>{{other.name}}</text>
						</view>
					</view>
					<view class="recommend">
						<flash-sale></flash-sale>
					</view>
				</view>
				<!-- 右侧登录盒子-->
				<view class="userBox">
					<view class="head">
						<image :src='userInfo.headImgUrl || "/static/image/miss-boy.png"'></image>
						<view class="headInfo">
							<view class="headName" v-if="userInfo.nickName">{{userInfo.nickName}}</view>
							<a v-if="userInfo.nickName">退出登录</a>
							<view class="headName" v-if="!userInfo.nickName">Hi~{{currentTime}}</view>
							<a v-if="!userInfo.nickName" @click="navTo('/pages/user/login/index')">注册</a>
						</view>
					</view>
					<view class="loginNow" v-if="!userInfo.nickName">
						<text>登录商城后更多优惠</text>
						<a>登录可享，专属优惠，贴心推荐！</a>
						<view class="loginBtn" @click="navTo('/pages/user/login/index')">立即登录</view>
					</view>
					<view class="menuList">
						<view class="menu"><u-icon name="shopping-cart" color="#666" size="52"></u-icon><text>购物车</text>
						</view>
						<view class="menu"><u-icon name="star" color="#666" size="52"></u-icon><text>收藏夹</text></view>
						<view class="menu"><u-icon name="clock" color="#666" size="52"></u-icon><text>我的足迹</text></view>
					</view>
					<view class="orderList" v-if="userInfo.nickName">
						<view class="order"><text>0</text>待发货</view>
						<view class="order"><text>0</text>待收货</view>
						<view class="order"><text>0</text>待评价</view>
						<view class="order"><text>0</text>售后</view>
					</view>
					<view class='orderSwiper' v-if="userInfo.nickName">
						<uni-swiper-dot class="uni-swiper-dot-box"  :info="orderList"
							:current="current" mode="default" :dots-styles="dotStyle" field="content">
							<swiper class="swiper-box" @change="change" :autoplay="true">
								<swiper-item v-for="(item, index) in orderList" :key="index"  >
									<view class="orderBox">
										<image :src="item.details[0].logo" mode="aspectFit"></image>
										<view class="orderInfo">
											<text class="elip_2">{{item.details[0].productName}}</text>
											<a>￥{{item.orderAmount}}</a>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>
					</view>
					
					<view class="vipBox">
						<image src="/static/image/home/VIP.png"></image>
						<view class="vipInfo">
							<text>翼宝会员</text>
							<a>权益升级，开通享多重好礼</a>
						</view>
						<view class="vipBtn">立即开通</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt';
	import flashSale from '@/components/home/flash-sale.vue';
	export default {
		components: {
			flashSale
		},
		data() {
			return {
				otherList:[
					{logo:'/static/image/icon/0.png',name:'限时秒杀'},
					{logo:'/static/image/icon/1.png',name:'国补'},
					{logo:'/static/image/icon/3.png',name:'游戏'},
					{logo:'/static/image/icon/4.png',name:'充值'},
					{logo:'/static/image/icon/2.png',name:'交易回收'},
					{logo:'/static/image/icon/10.png',name:'大转盘'},
					{logo:'/static/image/icon/5.png',name:'户外露营'},
					// {logo:'/static/image/icon/6.png',name:'限时秒杀'},
					{logo:'/static/image/icon/7.png',name:'加油卡'},
					{logo:'/static/image/icon/8.png',name:'云资源'},
					{logo:'/static/image/icon/9.png',name:'电脑馆'},
					
				],
				banners: [
					{imageUrl:'/static/image/1.png'},
					{imageUrl:'/static/image/2.png'}
				],
				bannerIndex: 0,
				categories: [],
				categoryIndex: -1,
				autoplay: true,
				userInfo: uni.getStorageSync('userInfo'),
				orderList: [],
				current:0,
				dotStyle: {
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '3px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 80, 0, 0.9)',
						selectedBorder: '3px rgba(255, 80, 0, 0.9) solid'
					},
			}
		},
		computed: {

			currentTime() {
				const currentHour = new Date().getHours();
				const timeQuantums = ['凌晨好', '上午好', '下午好', '晚上好'];
				return timeQuantums[Math.floor(currentHour / 6)];
			}
		},

		created() {
			// this.findBanners();
			this.findCategories();
			this.findOrders();
			this.userInfo =  uni.getStorageSync('userInfo')
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			
			change(e) {
				this.current = e.detail.current;
				this.$forceUpdate()
			},
			//分类跳转
			toList(item) {
				if (item.id) {
					uni.navigateTo({
						url: '/pages/goods/discountList?cateId=' + item.id
					})
				}
			},
			//获取订单
			findOrders() {
				var that = this
				var params = {
					pageNum: 1,
					pageSize: 3,
				}
				if (!this.userInfo.username) {
					return
				}
				this.uni_request({
					url: '/user/order/list',
					method: 'POST',
					data: params,
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							that.totalSize = res.data.total;
							var data = res.data.rows;
							that.orderList = res.data.rows
						}
					}
				})

			},
			//获取轮播图
			findBanners() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				uni.request({
					url: this.serverUrl + '/mall/carousel/pc/list',
					method: 'GET',
					header: {
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							this.banners = res.data.data

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			//获取分类
			findCategories() {
				uni.request({
					url: this.serverUrl + '/goods/category/first',
					method: 'get',
					header: {
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.categories = res.data.data;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})

			},

		}
	}
</script>

<style lang="scss">
	.warpper {
		background: #fff;
		padding: 20px 0;
	}
	.orderBox{
		image{width: 55px;height: 55px;}
		@extend %flex-align-center;
		justify-content: space-between;
		cursor: pointer;
		.orderInfo{
			width: calc(100% - 65px);
			text{font-size: 13px;margin-bottom: 5px;}
			a{font-size: 13px;text-align: right;color: $color-primary !important;margin-top: 5px;}
		}
	}
	.swiper-box{
		padding: 10px 5px;
		height: 80px;
		cursor: pointer;
	}
	.container {
		position: relative;
		max-width: $page-width;
		min-width: $page-minwidth;
		margin: 0 8vw;

		.category-wrap {
			@extend %flex-align-center;
			justify-content: space-between;
			display: flex;
			height: 430px;
			width: 100%;
			.cateBody{
				@extend %flex-align-center;
				justify-content: space-between;
				flex-wrap: wrap;
				width: calc(100% - 580px);
				height: 430px;
				.swiperImg{
					width: 620px;
					height: 210px;
					margin-bottom: 10px;
					background: #f7f7f7;
					cursor: pointer;
				}
				.other{
					width: calc(100% - 640px);
					height: 210px;
					margin-bottom: 10px;
					background: #f7f7f7;
					@extend %flex-align-center;
					justify-content: center;
					padding: 10px;overflow: hidden;
					flex-wrap: wrap;
					.otherBox{
						width: 70px;
						@extend %flex-align-center;
						margin-bottom: 10px;
						flex-direction: column;justify-content: center;
						image{width: 32px;height: 32px;}
						text{margin-top: 5px;font-size: 15px;}
					}
				}
				.recommend{
					width: 100%;
					height: 210px;background: #f7f7f7;
				}
			}
			.userBox {
				width: 270px;
				background-color: #f7f7f7;
				border-radius: 12px;
				height: 430px;
				padding: 10px;
				.loginNow{
					@extend %flex-align-center;
					flex-direction: column;
					margin-top: 10px;
					text{
						text-align: center;font-family: "PingFang SC";font-size: 17px;font-weight: 600;
						line-height: 18px;margin-top: 20px
					}
					a{ color: rgb(80, 82, 89);
						text-align: center;
						font-family: "PingFang SC";
						font-size: 14px;
						font-style: normal;
						font-weight: 400;
						line-height: 14px;
						margin-top: 12px;
					}
					.loginBtn{
						width: 100%;@extend %flex-align-center;
						height: 45px;color: #fff;
						background: $color-primary;
						font-size: 18px;
						justify-content: center;
						letter-spacing: 1px;
						font-weight: 600;
						border-radius: 6px;
						margin: 16px 12px;
						cursor: pointer;
					}
				}
				.head {
					@extend %flex-align-center;
					justify-content: space-between;

					image {
						width: 60px;
						height: 60px;
						border-radius: 50%;
					}

					.headInfo {
						width: calc(100% - 70px);

						.headName {
							font-size: 17px;
							font-weight: 600;
							line-height: 20px;
							color: #1A1A1A;
						}

						a {
							color: #999;
							cursor: pointer;
						}
						a:hover{
							color: $color-primary;
						}
					}
				}

				.menuList {
					@extend %flex-align-center;
					justify-content: space-between;
					padding: 20px 10px;

					.menu {
						@extend %flex-align-center;
						justify-content: center;
						flex-direction: column;
						cursor: pointer;

						text {
							margin-top: 3px;
						}
					}
				}

				.orderList {
					@extend %flex-align-center;
					justify-content: space-between;
					padding: 5px 10px;

					.order {
						@extend %flex-align-center;
						justify-content: center;
						flex-direction: column;
						cursor: pointer;

						text {
							color: #1A1A1A;
							font-size: 21px;
							font-weight: 400;
							line-height: 20px;
							text-align: center;
							width: 48px;
							margin-bottom: 5px;
						}
					}
				}
				.vipBox{
					position: relative;height: 100px;
					background: linear-gradient(to bottom, rgba(255, 231, 155, 0.8), rgba(255, 209, 68, 0.8));
					border: 1px solid #e7d18c;
					border-radius: 5px;overflow: hidden;
					box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
					width: 100%;color: #664100;
					image{height: 50px;width: 50px;opacity: 0.5;position: absolute;right: 1px;top: -10px;transform: rotate(15deg);}
					.vipInfo{
						position: absolute;height: 100%;width: 100%;top: 0;
						padding: 15px 10px 10px;
						@extend %flex-align-center;flex-direction: column;
						align-items: flex-start !important;
						text{font-weight: bold;font-size: 15px;margin-bottom: 3px;}
						a{font-size: 13px;}
					}
					.vipBtn{
						background: #664100;text-align: center;border-radius: 30px;
						width: 80px;color: #ffffff;padding: 3px 0;font-size: 14px;
						position: absolute;right: 10px;bottom: 5px;
					}
				}
			}

			.category-panel {
				width: 270px;
				background-color: #f7f7f7;
				border-radius: 12px;
				height: 430px;

				.category {
					@extend %flex-align-center;
					justify-content: space-between;
					padding-left: 30px;
					padding-right: 20px;
					height: 42px;
					line-height: 42px;
					cursor: pointer;

					&:hover,
					&.active {
						color: $color-primary !important;
						background: #eee;
					}

					.name:hover {
						color: $color-primary !important;
					}

					.name {
						color: #000;
					}

					.icon {
						color: #000;
						margin-top: 3px;
					}
				}
			}


		}
	}
</style>